<!-- 电站概况 -->
<template>
  <div v-if="powerStation">
    <div class="contentmain">
      <!-- 标题 -->
      <div class="contentmain-l">
        <!-- 左边第一模块 -->
        <div class="bgfff">
          <div class="title">
            <h3 class="big-title">{{ $t('licence.dia_title') }}</h3>
          </div>
          <!-- 第一行 -->
          <el-row :gutter="24">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <div class="content">
                  <p class="img-l">
                    <img src="../assets/images/dian-pic-01.png" alt="" />
                  </p>
                  <div class="content-r">
                    <h4 class="small-title">{{ $t('licence.homElectricity') }}</h4>
                    <p class="number">{{ EquipmentList.electricity }}</p>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <div class="content">
                  <p class="img-l">
                    <img src="../assets/images/dian-pic-02.png" alt="" />
                  </p>
                  <div class="content-r">
                    <h4 class="small-title">{{ $t('licence.homCumulative') }}</h4>
                    <p class="number">
                      {{ EquipmentList.cumulativeElectricity }}
                    </p>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <div class="content">
                  <p class="img-l">
                    <img src="../assets/images/dian-pic-05.png" alt="" />
                  </p>
                  <div class="content-r">
                    <h4 class="small-title">{{ $t('licence.dia_power') }}</h4>
                    <p class="number">{{ EquipmentList.power }}</p>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row :gutter="24">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <div class="content">
                  <p class="img-l">
                    <img src="../assets/images/dian-pic-06.png" alt="" />
                  </p>
                  <div class="content-r">
                    <h4 class="small-title">{{ $t('licence.dia_installedPower') }}</h4>
                    <p class="number">{{ EquipmentList.installedPower }}</p>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <div class="content">
                  <p class="img-l">
                    <img src="../assets/images/dian-pic-07.png" alt="" />
                  </p>
                  <div class="content-r">
                    <h4 class="small-title">{{ $t('licence.dia_kg') }}</h4>
                    <p class="number">{{ EquipmentList.emissionReduction }}</p>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <div class="content">
                  <p class="img-l">
                    <img src="../assets/images/dian-pic-08.png" alt="" />
                  </p>
                  <div class="content-r">
                    <h4 class="small-title">{{ $t('licence.dia_t') }}</h4>
                    <p class="number">
                      {{ EquipmentList.totalEmissionReduction }}
                    </p>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 左边第二模块 -->
        <div class="bgfff">
          <div class="title" id="title">
            <h3 class="big-title">{{ $t('licence.fau_Trendcurve') }}</h3>
            <!-- 年月日选择 -->
            <div class="time-box">
              <el-radio-group v-model="radio" fill="#305ADD" border="true" @change="electricTrend">
                <el-radio-button :label="1">{{ $t('licence.sta_day') }}</el-radio-button>
                <el-radio-button :label="2">{{ $t('licence.sta_week') }}</el-radio-button>
                <el-radio-button :label="3">{{$t('licence.sta_month')}}</el-radio-button>
                <el-radio-button :label="4">{{$t('licence.sta_quarter')}}</el-radio-button>
                <el-radio-button :label="5">{{ $t('licence.sta_year') }}</el-radio-button>
                <el-radio-button :label="6">{{$t('licence.sta_liyear')}}</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <!-- 数据曲线图 -->
          <el-row>
            <el-col :span="24">
              <div id="curveData" v-show="radio <= 1"></div>
              <div id="ColumnarData" v-show="radio > 1"></div>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- 右边内容 -->
      <div class="contentmain-r">
        <!-- 右边模块三  电站信息 -->
        <div class="bgfff">
          <div class="title">
            <h3 class="big-title">{{ $t('licence.dia_xinxi') }}</h3>
          </div>
          <!-- 电站信息 -->
          <div class="powerStation">
            <div class="power-title flexStart">
              <span class="power-img">
                <el-image style="width: 100%; height: 100%" :src="Imgurl">
                </el-image>
              </span>
              <h4 class="title">{{ StationInfoList.stationName }}</h4>
            </div>
            <div class="power-content">
              <ul>
                <li>
                  <span class="content-l">{{ $t('licence.safety_num1') }}：</span
                  ><span class="cont">{{ lang==0?StationInfoList.country:StationInfoList.countryEn }}</span>
                </li>
                <li v-if="StationInfoList.address">
                  <span class="content-l">{{ $t('licence.est_address') }}：</span><span class="cont">{{
                    StationInfoList.address }}</span>
                </li>
                <li>
                  <span class="content-l">{{ $t('licence.local_Time') }}：</span
                  ><span class="cont">{{ StationInfoList.localTime }}</span>
                </li>
                <!-- <li>
                  <span class="content-l">{{ $t('licence.dia_createTime') }}</span><span class="cont">{{
                    format.FormatDate(StationInfoList.createTime)
                  }}</span>
                </li> -->
                <li>
                  <span class="content-l">{{ $t('licence.dia_days') }}</span><span class="cont">{{ StationInfoList.days
                  }}</span>
                </li>
                <li>
                  <span class="content-l">{{ $t('licence.dia_psNum') }}</span><span class="cont">{{ StationInfoList.psNum
                  }}</span>
                </li>
                <li v-if="StationInfoList.nickName">
                  <span class="content-l">{{ $t('licence.dia_name') }}</span><span class="cont">{{
                    StationInfoList.nickName }}</span>
                </li>
                <li>
                  <span class="content-l">{{ $t('licence.dia_user_name') }}</span><span class="cont">{{
                    StationInfoList.userName }}</span>
                </li>
                <li>
                  <div v-if="StationInfoList.introduction">
                    <span class="content-l">{{ $t('licence.dia_introduction') }}</span>
                    <span :class="hidetext == true ? 'contr' : 'conts'" ref="text" style="width: 270px">
                      {{ StationInfoList.introduction }}
                    </span>
                  </div>
                  <span v-if="nomore">
                    <span @click="lookmore" class="iconS"> {{ moretext }}</span>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 右边模块一 天气 -->
        <div style="position: relative" v-if="Object.keys(weatherL).length">
          <div class="bgfff" v-loading="loading">
            <div class="title">
              <h3 class="big-title">{{ $t('licence.dia_tianqi') }}</h3>
            </div>
            <!-- 天氣 -->
            <div class="weather flexBetween">
              <!-- 天气左边温度 -->
              <div class="weather-l">
                <p class="weather-l-t">
                  <span class="weatherC">{{ weatherC }}</span>
                  <span class="C">&#176;C</span>
                  <span class="weatherText">{{ weatherL.text }}</span>
                </p>
                <div class="weather-l-m">
                  <img src="../assets/images/addt.png" alt="" />{{
                    weatherA
                  }}
                </div>
                <!-- 天气右边时间地点 -->
              </div>
              <div class="weather-r">
                <div class="weather-r-t">
                  <img :src="'http:' + weatherL.icon" alt="" />
                </div>
              </div>
            </div>
            <div class="tian"></div>
          </div>
        </div>
        <!-- 右边模块二 设备信息 -->
        <div class="bgfff">
          <div class="title">
            <h3 class="big-title">{{ $t('licence.sys_equipmentInformation') }}</h3>
          </div>
          <!-- 设备信息 -->
          <ul class="status">
            <li class="status-list" @click="gotoStatus(1)">
              <span class="status-img">
                <img src="../assets/images/dian-pic-09.png" alt="" />
              </span>
              <span class="b-bg">
                <span class="status-title">{{ $t('licence.dia_normal') }}</span>
                <span class="status-number">{{
                  StationStateList.normalNo
                }}</span>
              </span>
            </li>
            <li class="status-list" @click="gotoStatus(2)">
              <span class="status-img">
                <img src="../assets/images/dian-pic-10.png" alt="" />
              </span>
              <span class="b-bg">
                <span class="status-title">{{ $t('licence.dia_fault') }}</span>
                <span class="status-number">{{
                  StationStateList.faultNo
                }}</span>
              </span>
            </li>
            <li class="status-list" @click="gotoStatus(4)">
              <span class="status-img">
                <img src="../assets/images/dian-pic-11.png" alt="" />
              </span>
              <span class="b-bg">
                <span class="status-title">{{ $t('licence.dia_alert') }}</span>
                <span class="status-number">
                  {{ StationStateList.warningNo }}
                </span>
              </span>
            </li>
            <li class="status-list" @click="gotoStatus(3)">
              <span class="status-img">
                <img src="../assets/images/dian-pic-12.png" alt="" />
              </span>
              <span class="b-bg">
                <span class="status-title">{{ $t('licence.dia_line') }}</span>
                <span class="status-number">{{
                  StationStateList.offlineNo
                }}</span>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <el-empty :image-size="300" v-else>
    <el-button type="primary" @click="router.push({ path: 'establishDianzhan' })">{{ $t('licence.est_powerStation') }}</el-button>
  </el-empty>
</template>

<script setup lang="ts" name="Dianzhan">
import * as echarts from "echarts";
import { getEquipment, getStationState, getStationInfo, getstationCurve, getStationWeather, } from "@/api/dianzhan";
import { isHttp } from '@/utils/validate';
import format from '@/utils/format'
import { useSettingsStore } from '@/store/modules/settings';
import { useI18n } from 'vue-i18n'
import auth from "@/plugins/auth"
import useStationStore from '@/store/modules/station'
const stationStore = useStationStore();
const { t } = useI18n()
const settingStore = useSettingsStore();
const route = useRoute();
const router = useRouter();
const showCountry=ref(false);
const nomore = ref(false);//展开收起
const hidetext = ref(false);
let moretext = ref(t('licence.pow_zhankai'))
// 遮罩层
const loading = ref(true);
const powerStation = ref({
  id:-1
}); //获取电站信息
const radio = ref(1); //年月日默认选择
const EquipmentList = ref({
  electricity: '',
  cumulativeElectricity: '',
  power: '',
  installedPower: '',
  emissionReduction: '',
  totalEmissionReduction: '',
});//设备统计
const StationStateList = ref({
  normalNo:'',
  faultNo:'',
  warningNo:'',
  offlineNo:'',
}); //设备信息
const StationInfoList = ref({
  stationName:'',
  address:'',
  createTime:'',
  days:'',
  psNum:'',
  nickName:'',
  userName:'',
  introduction:'',
  avatar:'',
  avatarOss:'',
  country:'',
  countryEn:'',
  localTime:''
}); //电站信息
const Imgurl = ref('');

const weatherL = ref<any>({
  text:'',
  icon:'',
});//天气左图标
const weatherC = ref('');//天气摄氏度
const weatherT = ref('');// 天气时间
const weatherD = ref('');//天气日期

const weatherA = ref('');//天气地址
const weatherW = ref('');//天气星期

const lang = ref(0);

onMounted(() => {
  // 存到本地存储 header电站名和导航 显示与隐藏
  settingStore.setHeaderSum(4);
  // 获取语言
  if (localStorage.getItem("locale") == "en_US") {
    lang.value = 1;
  } else {
    lang.value = 0;
  }
  // 获取电站信息
  powerStation.value = stationStore.powerStation;
  if(!powerStation.value) return;
  // 获取天气
  nextTick(() => {
    getWeather();
  })
  // 获取设备统计
  equipment();
  // 获取设备信息
  stationState();
  // 获取电站信息
  stationInfo();
  // 发电趋势
  electricTrend();
  showCountry.value = auth.hasPermi('index:powerstaion:show');
})

// 展开收起
//查看更多
const lookmore = () => {
  hidetext.value = !hidetext.value;
  moretext.value = hidetext.value == true ? t('licence.pow_zhankai') : t('licence.pow_stow');
};
// 页面跳转电站监控查询状态
const gotoStatus = (key:any) => {
  router.push({
    name: "Inveter",
    query: {
      statusKey: key,
    },
  });
};
// 获取设备统计
const equipment = async () => {
  let params = {
    stationId: powerStation.value?.id,
    currency: "",
  };
  let res = await getEquipment(params);
  EquipmentList.value = res.data;
};
// 获取设备信息
const stationState = async () => {
  let params = {
    stationId: powerStation.value?.id,
  };
  let res = await getStationState(params);
  StationStateList.value = res.data;
};
// 获取电站信息
const stationInfo = async () => {
  let params = {
    stationId: powerStation.value?.id,
  };
  let res = await getStationInfo(params);
  StationInfoList.value = res.data;
  Imgurl.value = StationInfoList.value.avatarOss?StationInfoList.value.avatarOss:import.meta.env.VITE_IMG_BASE_API + StationInfoList.value.avatar
  // let height = $refs.text.clientHeight;
  if (res.data.introduction) {
    hidetext.value = true;
    nomore.value = true;
  } else {
    nomore.value = false;
  }
};
// 获取天气
const getWeather = async () => {
  loading.value = true;
  let res = await getStationWeather({
    stationId: powerStation.value?.id,
    lang: lang.value,
  });
  // 天气左 图标
  if (res.data) {
    weatherL.value = res.data.current.condition;
    weatherC.value = res.data.current.temp_c;

    // 天气地址
    weatherA.value = res.data.address;
    // 天气星期
    weatherW.value = res.data.week;
    // 时间
    weatherT.value = res.data.location.localtime.substring(10, 17);
    // 日期
    weatherD.value = res.data.location.localtime
      .substring(5, 10)
      .replace("-", "/");
  }
  else weatherL.value = {}
  loading.value = false;
};
// 发电趋势
const electricTrend = async () => {
  let date = new Date().toISOString().slice(0, 10)
  const { data } = await getstationCurve({
    stationId: powerStation.value?.id,
    type: radio.value,
    lang: lang.value,
    searchDay: date,
  });
  if (radio.value <= 1) {
    getcurveData(data);
  } else {
    getColumnarData(data);
  }
};

// 数据曲线图的选择年月日
// 数据曲线图
const getcurveData = (data:any) => {
  const myChart = echarts.init(document.getElementById("curveData") as HTMLElement) as echarts.ECharts;
  let dataArr1 = data.series[0].data;
  let dataArr2 = data.series[1].data;
  let intervalY1 = Math.ceil(Math.max(...dataArr1) / 6);
  let intervalY2 = Math.abs(Math.max(...dataArr2) / 6);
  myChart.setOption({
    // 悬浮提示
    tooltip: {
      show: true,
      trigger: "axis",
      backgroundColor: "#656565",
      textStyle: { color: "#ffffff", align: "center" },
      extraCssText: "box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19);",
    },
    legend: {
      itemHeight: 12,
      itemWidth: 12,
      icon: "circle",
    },
    // 位置
    grid: {
      left: "3%",
      right: "5.5%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: data.categories,
    },
    yAxis: [
      {
        type: "value",
        name: data.series[0].unit,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          // 保留一位小数
          formatter: function (value:any) {
            return value.toFixed(1);
          },
        },
        min: 0,
        max: intervalY1 * 6, // 最大值
        splitNumber: 6, // 坐标轴的分割段数(预估值)
        interval: intervalY1, // 强制设置坐标轴分割间隔。
      },
      {
        type: "value",
        name: data.series[1].unit,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          // 保留一位小数
          formatter: function (value:any) {
            return value.toFixed(1);
          },
        },
        min: 0,
        max: intervalY2 * 6, // 最大值
        splitNumber: 6, // 坐标轴的分割段数(预估值)
        interval: intervalY2, // 强制设置坐标轴分割间隔。
      },
    ],
    series: [
      {
        name: data.series[0].name,
        data: data.series[0].data,
        type: "line",
        symbol: "none",
        itemStyle: {
          normal: {
            color: "#5079F6",
            lineStyle: {
              width: 1, //设置线条粗细
            },
          },
        },

        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(44,90,221)",
            },
            {
              offset: 1,
              color: "rgba(44,90,221,0)",
            },
          ]),
        },
        yAxisIndex: 0, //对应标签yAxis中的第一个数据
      },
      {
        name: data.series[1].name,
        data: data.series[1].data,
        type: "line",
        symbol: "none",
        itemStyle: {
          normal: {
            color: "#E28868",
            lineStyle: {
              width: 1, //设置线条粗细
            },
          },
        },

        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(255,78,20)",
            },
            {
              offset: 1,
              color: "rgba(255,78,20,0)",
            },
          ]),
        },
        yAxisIndex: 1, //对应标签yAxis中的第二个数据
      },
    ],
  });
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};
// 日以外的柱状图
const getColumnarData = (data:any) => {
  const myChart = echarts.init(document.getElementById("ColumnarData") as HTMLElement)as echarts.ECharts;
  myChart.setOption({
    // 悬浮提示
    tooltip: {
      show: true,
      trigger: "axis",
      backgroundColor: "#656565",
      textStyle: { color: "#ffffff" },
      extraCssText: "box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19);",
    },
    legend: {
      itemHeight: 12,
      itemWidth: 12,
      icon: "circle",
      // data: ["发电量", "功率"],
    },
    // 位置
    grid: {
      left: "4%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      // boundaryGap: false,
      data: data.categories,
      //  boundaryGap: ['0', '1%'],//留白大小，坐标轴两边留白
    },
    yAxis: [
      {
        type: "value",
        name: data.series[0].unit,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          formatter: "{value}",
        },
        min: 0,
        //  boundaryGap: ['5%', '5%'],//留白大小，坐标轴两边留白
      },
    ],
    series: [
      {
        name: data.series[0].name,
        data: data.series[0].data,
        type: "bar",
        barWidth: "16",
        // barCategoryGap: "5%",
        barGap: 7,
        itemStyle: {
          color: "#305ADD",
        },
      },
    ],
  });
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};
</script>

<style scoped lang="scss">
*{
  padding:0;
}
.contentmain {
  display: flex;
  justify-content: space-between;

  .bgfff {
    background: #ffffff;
    border-radius: 6px;
    padding: 24px 20px 20px 20px;
    margin-bottom: 20px;
  }

  .big-title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #0e1319;
    margin-bottom: 20px;
    line-height: 30px;
  }

  .contentmain-l {
    width: 74%;
    margin-right: 20px;

    // 大标题
    .bgfff:first-child {
      .el-col>div {
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
      }
    }

    .grid-content {
      padding: 25px 0 25px 20px;
      background: #f8f9fb;
      border-radius: 6px;
      margin-bottom: 20px;

      .content {
        display: flex;
        justify-content: space-between;

        // 左边图片
        .img-l {
          width: 68px;
          height: 68px;
          border-radius: 50%;
          // background: #305add;
          // opacity: 0.2;
          margin-right: 20px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        // 右边内容
        .content-r {
          flex: 1;

          // 小标题
          .small-title {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #868d9c;
            line-height: 25px;
          }

          .number {
            font-size: 32px;
            font-family: SamsungOne700;
            font-weight: 600;
            color: #0e1319;
          }
        }
      }
    }

    #title {
      display: flex;
      justify-content: space-between;
      height: 30px;

      // 年月日选择
      ::v-deep .el-radio-button__inner {
        border: none;
        border-radius: 4px;
        background: #e7e7e7;
        margin-left: 10px;
      }

      ::v-deep .el-radio-button:first-child .el-radio-button__inner {
        border-radius: 4px;
      }

      ::v-deep .el-radio-button--mini .el-radio-button__inner {
        padding: 6px 12px;
      }
    }

    #curveData {
      // width: 1300px;
      height: 560px;
      margin-top: 40px;
      // background-color: #FFF;
    }

    #ColumnarData {
      // width: 1300px;
      height: 560px;
      margin-top: 40px;
      // background-color: #FFF;
    }
  }

  .contentmain-r {
    flex: 1;

    // 右边模块二 天气
    .weather {
      // padding: 0 14px 0 4px;
      height: 130px;
      position: relative;
      margin-top: -30px;
      padding-left: 20px;

      .weather-l {

        // display: flex;
        .weather-l-t {
          display: flex;
          align-items: flex-start;

          .weatherC {
            font-size: 40px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #2b2b2b;
          }

          .C {
            margin-top: 12px;
            font-size: 16px;
            // font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #2b2b2b;
          }

          .weatherText {
            margin-top: 7px;
            margin-left: 15px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #2b2b2b;
          }
        }

        .weather-l-m {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2b2b2b;

          img {
            height: 16px;
            width: 13px;
            vertical-align: middle;
            margin-right: 5px;
          }
        }
      }

      .weather-r {

        // padding-top: 20px;
        .weather-r-t {
          img {
            // background: #fff;
            width: 100px;
            height: 100px;
            vertical-align: bottom;
          }
        }

        .weather-r-b {
          .tianqi {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #2b2b2b;
            margin-left: 12px;
          }

          .one {
            background: #02e200;
          }

          .two {
            background: #ffe200;
          }

          .three {
            background: #f88000;
          }

          .four {
            background: #fc0001;
          }

          .five {
            background: #920247;
          }

          .six {
            background: #82012a;
          }
        }
      }
    }

    .tian {
      background: url("../../assets/images/tian.png") no-repeat;
      background-size: cover;

      height: 20px;
      width: 100%;
      position: absolute;
      // bottom: -20px;
      // left: -90px;
      left: 0;
      z-index: 9999;
    }

    .ab {
      position: relative;
    }

    // 右边模块二 设备信息
    .status {
      .status-list {
        cursor: pointer;
        display: flex;
        align-items: center;
        height: 53px;
        line-height: 53px;
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }

        .b-bg {
          border-bottom: 1px solid #f6f7f8;
          flex: 1;
          display: flex;
          justify-content: space-between;
        }

        .status-img {
          vertical-align: middle;
          display: inline-block;
          width: 32px;
          height: 32px;
          // background: #3cf0a8;
          border-radius: 6px;
          // opacity: 0.2;
          margin-right: 12px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .status-title {
          color: #0e1319;
          font-size: 14px;
          font-weight: 400;
          font-family: PingFangSC-Regular, PingFang SC;
        }

        .status-number {
          font-family: SamsungOne700;
          font-weight: 900;
          color: #0e1319;
        }
      }
    }

    // 右边模块三 电站信息
    .powerStation {
      background: #f8f9fb;
      border-radius: 8px;
      padding: 15px 20px 8px 20px;

      // height: 276px;
      .power-title {
        position: relative;

        .power-img {
          overflow: hidden;
          width: 64px;
          height: 64px;
          background: #d8d8d8;
          border-radius: 6px;
          margin-right: 12px;
          cursor: pointer;

          img {
            width: 100%;
            height: 100%;
            border-radius: 6px;
          }
        }

        .hoverImg {
          width: 180px;
          height: 190px;
          border: 1px solid #666666;
          padding: 5px;
          position: absolute;
          left: 75px;
          display: none;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .power-img:hover .hoverImg {
          display: block;
          width: 180px;
          height: 190px;
          border: 1px solid #666666;
        }

        .title {
          flex: 1;
          font-size: 16px;
          font-weight: 600;
          line-height: 20px;
          line-height: 24px;
          color: #0e1319;
        }
      }

      .power-content {
        margin-top: 14px;

        li {
          list-style: none;
          margin-bottom: 10px;
          // display: flex;
          // align-items: center;
        }

        .content-l {
          width: 120px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
        }

        .cont {
          // display: inline-block;
          // word-wrap: break-word;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #0e1319;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // white-space: nowrap;
        }

        .contr {
          display: inline-block;
          word-wrap: break-word;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #0e1319;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .conts {
          display: inline-block;
          word-wrap: break-word;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #0e1319;
        }

        .iconS {
          font-size: 12px;
          cursor: pointer;
          color: #5079f6;
        }
      }
    }
  }
}
.el-button--primary {
  color: #ffffff;
  background-color: #305add;
  border-color: #305add;
}
</style>
